<template>
  <div class="check" id="div1">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">协助发货</span>
        <el-button style="float: right;" type="success" @click="dialogUploadOpen">导入订单</el-button>
        <el-button type="info" size="mini" @click="tableMultiPrint()"><i class="fa fa-print" aria-hidden="true"> 打印</i></el-button>
      </div>
      <s-table
        :table="table"
        :expand="true"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="120">
          <template slot-scope="s">
            <el-button type="info" size="mini" icon="edit" @click="tableEdit(s.row)">修改备注</el-button>
          </template>
        </el-table-column>
        <el-form-item label="订单号" prop="ddh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_ddh"
                    placeholder="订单号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="流水号" prop="lsh">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_lsh"
                    placeholder="流水号" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
        <el-form-item label="发起人" prop="fqr">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_fqr"
                    placeholder="发起人" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>
    <s-dialog :dialog="dialogUpload" :close="dialogUploadInit" :closeTip="false">
      <p slot="title">导入订单</p>
      <el-upload
        ref="upload"
        name="zxwms_shipment"
        :action="action"
        :show-file-list="true"
        :before-upload="dialogUploadBefore"
        :on-success="dialogUploadSuccess"
        :on-error="dialogUploadError"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="dialogUploadSubmit">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
      </el-upload>
      <el-button slot="footer" @click="dialogUploadSave">好</el-button>
    </s-dialog>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}备注</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="bz" label="备注">
              <el-input
                type="text"
                v-model="formDialog.bz"
                placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogPrint" :close="dialogInit">
      <s-form :form="formPrint" ref="formPrint" id ='div2'>
        <style>td{border:1px solid #000;}</style>
        <table border=1 width="100%" style="border:solid 1px black;border-collapse:collapse">
          <thead>
          <tr><td width="33%" rowspan="2">作者</td>
            <td width="33%">歌曲题目
            </td>
            <td width="33%" rowspan="2"><b><font face="宋体" size="2">国籍<font color="#000000"><i>(Country)</i></font></font></b></td></tr>
          <tr>
            <td width="34%"><b><font color="#000000" face="宋体" size="2"><i>CD Title</i></font></b>
            </td>
          </tr>
          </thead>

          <tbody>
          <tr>
            <td width="33%">Bob Dylan</td>
            <td width="33%">Empire Burlesque</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Bonnie Tyler</td>
            <td width="33%">Hide your heart</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Dolly Parton</td>
            <td width="33%">Greatest Hits</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Gary Moore</td>
            <td width="33%">Still got the blues</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Eros Ramazzotti</td>
            <td width="33%">Eros</td>
            <td width="34%">EU</td>
          </tr>
          <tr>
            <td width="33%">Bee Gees</td>
            <td width="33%">One night only</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Dr.Hook</td>
            <td width="33%">Sylvias Mother</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Rod Stewart</td>
            <td width="33%">Maggie May</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Andrea Bocelli</td>
            <td width="33%">Romanza</td>
            <td width="34%">EU</td>
          </tr>
          <tr>
            <td width="33%">Percy Sledge</td>
            <td width="33%">When a man loves a woman</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Savage Rose</td>
            <td width="33%">Black angel</td>
            <td width="34%">EU</td>
          </tr>
          <tr>
            <td width="33%">Many</td>
            <td width="33%">1999 Grammy Nominees</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Kenny Rogers</td>
            <td width="33%">For the good times</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Will Smith</td>
            <td width="33%">Big Willie style</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Van Morrison</td>
            <td width="33%">Tupelo Honey</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Cat Stevens</td>
            <td width="33%">the very best of</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Sam Brown</td>
            <td width="33%">Stop</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">T'Pau</td>
            <td width="33%">Bridge of Spies</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Tina Turner</td>
            <td width="33%">Private Dancer</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Kim Larsen</td>
            <td width="33%">Midt om natten</td>
            <td width="34%">EU</td>
          </tr>
          <tr>
            <td width="33%">Luciano Pavarotti</td>
            <td width="33%">Pavarotti Gala Concert</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Otis Redding</td>
            <td width="33%">the dock of the bay</td>
            <td width="34%">USA</td>
          </tr>
          <tr>
            <td width="33%">Simply Red</td>
            <td width="33%">Picture book</td>
            <td width="34%">EU</td>
          </tr>
          <tr>
            <td width="33%">the Communards</td>
            <td width="33%">Red</td>
            <td width="34%">UK</td>
          </tr>
          <tr>
            <td width="33%">Joe Cocker</td>
            <td width="33%">Unchain my heart</td>
            <td width="34%">USA</td>
          </tr>
          </tbody>
          <tfoot>
          <tr><th colspan=3 width="426"><b><font face="宋体" size="2">我的CD清单<font color="#000000"><i>(CD
            list gungho999@sina.com)</i></font></font></b></th></tr>
          </tfoot>
        </table>
      </s-form>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, AutoPromise, GetLodop, FormatterTime} from '~/plugins/Tools';
  import Config from '~/config';
  let {
    PublicImageServer,
  } = Config;
  function __formTest () {
    return {
      xbh: { value: '', rule: [], search: true },
      bz: { value: '', rule: [], search: false },
      sl: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      // zjsj: { value: '', type: 'Date', rule: [ 'vNull__change' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'outOperation_check-FEcarWms',
    head: {
      'title': '协助发货',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 协助发货 查看协助发货信息'},
      ],
    },
    store: ['USER'],
    data: {
      header: {
        'Content-Disposition': 'attachment',
      },
      table: {
        column: [
          {
            label: '发起部门',
            prop: 'fqbm',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发起人',
            prop: 'fqr',
            minWidth: '0px',
            search: true,
          },
          {
            label: '用途',
            prop: 'yt',
            minWidth: '0px',
            search: false,
          },
          {
            label: '流水号',
            prop: 'lsh',
            minWidth: '0px',
            search: true,
          },
          {
            label: '订单号',
            prop: 'ddh',
            minWidth: '0px',
            search: true,
          },
          {
            label: '等待合并发运单号',
            prop: 'ddhbfydh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发货方式',
            prop: 'fhfs',
            minWidth: '0px',
            search: false,
          },
          {
            label: '运费承担方',
            prop: 'yfcdf',
            minWidth: '0px',
            search: false,
          },
          {
            label: '收货人姓名',
            prop: 'shrxm',
            minWidth: '0px',
            search: false,
          },
          {
            label: '收货人国家',
            prop: 'shrgj',
            minWidth: '0px',
            search: false,
          },
          {
            label: '省份',
            prop: 'sf',
            minWidth: '0px',
            search: false,
          },
          {
            label: '城市',
            prop: 'cs',
            minWidth: '0px',
            search: false,
          },
          {
            label: '县/区',
            prop: 'xq',
            minWidth: '0px',
            search: false,
          },
          {
            label: '收货地址',
            prop: 'shdz',
            minWidth: '0px',
            search: false,
          },
          {
            label: '联系电话',
            prop: 'lxdh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发起日期',
            prop: 'fqrq',
            minWidth: '0px',
            search: false,
          },
          {
            label: '支付日期',
            prop: 'zfrq',
            minWidth: '0px',
            search: false,
          },
          {
            label: '服务编号',
            prop: 'fwbh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '产品名称',
            prop: 'cpmc',
            minWidth: '0px',
            search: false,
          },
          {
            label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
          {
            label: '规格',
            prop: 'gg',
            minWidth: '0px',
            search: false,
          },
          {
            label: '单位',
            prop: 'dw',
            minWidth: '0px',
            search: false,
          },
          {
            label: '产品类别',
            prop: 'cplb',
            minWidth: '0px',
            search: false,
          },
          {
            label: '单价',
            prop: 'dj',
            minWidth: '0px',
            search: false,
          },
          {
            label: '特定物流单号',
            prop: 'tdwldh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '货号',
            prop: 'hh',
            minWidth: '0px',
            search: false,
          },
          {
            label: '发货摘要',
            prop: 'fazy',
            minWidth: '0px',
            search: false,
          },
          {
            label: '备注',
            prop: 'bz',
            minWidth: '0px',
            search: false,
          },
        ],
        data: [ /* {
          hpbh: '20160502',
          hpmc: '王小虎',
          sl: '1518 弄',
          xbh: '1',
        } */ ],
        key: 'id',
        tableColumn: 28,
        url: '/wmsassistdelivery/list',
        muti: false,
        total: 0,
      },
      dialogUpload: {},
      formDialog: __formTest(),
      formPrint: __formTest(),
      dialog: {
        title: '修改',
        row: {},
      },
      dialogPrint: {
        title: '修改',
        row: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      tableMultiPrint () {
        let LODOP = GetLodop();
        let HTML = `<html>
<head>
</head>
<body>
<div id="dv1">
<form valign="center">
  <table border="2" width="90%" height="95%" cellspacing="1" >
  <tr>
  <td width="60" height="16" align="center" >A等</td>
  <td width="60" height="16" align="center">B等</td>
  <td width="60" height="16" align="center">C等</td>
  <td width="100" height="16" align="center">D等</td>
  </tr>
  <tr>
  <td>A001</td>
  <td>B001</td>
  <td>C001</td>
  <td>D3号</td>
  </tr>
 <tr>
  <td>A001</td>
  <td>B001</td>
  <td>C001</td>
  <td>D3号</td>
  </tr>
 <tr>
  <td>A001</td>
  <td>B001</td>
  <td>C001</td>
  <td>D3号</td>
  </tr>
</table>
</form>
</div>
</body>
</html>`;
        LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_预览打印表格');
        LODOP.SET_PRINT_PAGESIZE(0, 0, '95%', 'A4');
        LODOP.ADD_PRINT_TEXT(8, 293, 275, 30, '大连双迪发运装载单');
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 12);
        LODOP.SET_PRINT_STYLEA(0, 'Bold', 1);
        LODOP.ADD_PRINT_BARCODE(210, 73, 322, 49, 'Code39', '111222344455221123');
        LODOP.ADD_PRINT_TEXT(50, 15, 100, 20, '商品编号');
        LODOP.ADD_PRINT_TEXT(50, 149, 100, 20, '商品名称');
        LODOP.ADD_PRINT_TEXT(50, 289, 100, 20, '商品数量');
        LODOP.ADD_PRINT_TEXT(50, 409, 100, 20, '单价(元)');
        LODOP.ADD_PRINT_LINE(45, 14, 43, 512, 0, 2);
        LODOP.ADD_PRINT_LINE(76, 14, 44, 16, 0, 2);
        LODOP.ADD_PRINT_LINE(76, 132, 44, 134, 0, 2);
        LODOP.ADD_PRINT_LINE(76, 270, 44, 272, 0, 2);
        LODOP.ADD_PRINT_LINE(76, 398, 44, 400, 0, 2);
        LODOP.ADD_PRINT_LINE(76, 512, 44, 514, 0, 2);
        LODOP.ADD_PRINT_LINE(78, 14, 76, 512, 0, 2);
        LODOP.ADD_PRINT_TEXT(81, 15, 81, 20, '000-0');
        LODOP.ADD_PRINT_TEXT(81, 149, 81, 20, '商品A0');
        LODOP.ADD_PRINT_TEXT(81, 289, 81, 20, '1.00');
        LODOP.ADD_PRINT_TEXT(81, 409, 81, 20, '10.00');
        LODOP.ADD_PRINT_LINE(101, 14, 76, 15, 0, 1);
        LODOP.ADD_PRINT_LINE(101, 132, 76, 133, 0, 1);
        LODOP.ADD_PRINT_LINE(101, 270, 76, 271, 0, 1);
        LODOP.ADD_PRINT_LINE(101, 398, 76, 399, 0, 1);
        LODOP.ADD_PRINT_LINE(101, 512, 76, 513, 0, 1);
        LODOP.ADD_PRINT_LINE(102, 14, 101, 512, 0, 1);
        LODOP.ADD_PRINT_TEXT(106, 15, 81, 20, '000-1');
        LODOP.ADD_PRINT_TEXT(106, 149, 81, 20, '商品A1');
        LODOP.ADD_PRINT_TEXT(106, 289, 81, 20, '1.00');
        LODOP.ADD_PRINT_TEXT(106, 409, 81, 20, '10.00');
        LODOP.ADD_PRINT_LINE(126, 14, 101, 15, 0, 1);
        LODOP.ADD_PRINT_LINE(126, 132, 101, 133, 0, 1);
        LODOP.ADD_PRINT_LINE(126, 270, 101, 271, 0, 1);
        LODOP.ADD_PRINT_LINE(126, 398, 101, 399, 0, 1);
        LODOP.ADD_PRINT_LINE(126, 512, 101, 513, 0, 1);
        LODOP.ADD_PRINT_LINE(127, 14, 126, 512, 0, 1);
        // LODOP.ADD_PRINT_TABLE(0, 0, '205mm', '290mm', HTML);
        LODOP.PREVIEW();
      },
      dialogUploadInit () {},
      async dialogUploadOpen () {
        this.dialogUpload.visible = true;
      },
      dialogUploadBefore (file) {
        var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
        let ifchinese = reg.test(file.name);
        /* if (ifchinese) {
          this.$message.error('文件名不能包含中文!');
        } */
        const isExcel = file.type === 'application/vnd.ms-excel';
        const isLt = file.size / 1024 / 1024 < 50;
        if (!isExcel) {
          this.$message.error('上传文件只能是 Excel 格式!');
        }
        if (!isLt) {
          this.$message.error('上传头像图片大小不能超过 50MB!');
        }
        return (isExcel) && isLt;
      },
      async dialogUploadSuccess (res, file, fileList) {
        let filepath = PublicImageServer.src + '/' + 'excel/zxwms/shipment';
        console.log(filepath + '/' + encodeURI(res.filename));
        try {
          await this.post('/wmsassistdelivery/upload', {
            filepath: filepath + '/' + encodeURI(res.filename),
          });
          this.tableWatch('table');
        } finally {
          this.del(this.action + '/' + res.filename);
        }
      },
      dialogUploadError (err) {
        console.log('err', err);
      },
      dialogUploadSubmit () {
        this.$refs.upload.submit();
      },
      dialogUploadSave () {
        this.dialogUploadInit();
        this.dialogUpload.visible = false;
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__formTest()),
        };
        this.resetFields('formDialog');
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
      },
      async dialogOpen (type, row) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__formTest(), row),
          };
          this.dialog.row = row;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '修改') {
          this.VALIDATE('formDialog', async option => {
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmsassistdelivery/edit', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    computed: {
      action: function () {
        return PublicImageServer.src + '/' + PublicImageServer.upload + '/excel/zxwms/shipment';
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
  .headertype {
    color:#1bab8b;
  }
</style>

<style lang="scss">

</style>
